<template>
	<view class="Commodity">
		<!--头部-->
		<view class="header">
			<!-- 返回 -->
			<view class="tap" @click="goBeck">
				<image src="https://cdn3.axureshop.com/demo/1989398/images/%E6%88%91%E7%9A%84%E8%AE%A2%E5%8D%95/u591.svg"></image>
				<text>返回</text>
			</view>
			
		</view>
		<!-- 商品基本信息 -->
		<view class="com-box">
			<!--轮播图-->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<view v-for="v in imageList">
						<swiper-item>
							<view class="swiper-item">
								<image :src="v"></image>
							</view>
						</swiper-item>
					</view>
					
				</swiper>
			</view>

			<view class="box-price">
				<span>￥{{goodsList.price}}</span>
				<span>推荐</span>
			</view>
			<view class="box-cname">
				<span>{{goodsList.goodsName}}</span>
			</view>
			
			<!--店铺-->
			<view class="box-shop">
				<view class="shop-sname">
					<span class="ders">
						<span class="der"></span>
						<span class="der"></span>
						<span class="der"></span>
					</span>
					<span class="sname">{{goodsList.store.storeName}}</span>
				</view>
				<view class="shop-address">
					地址:{{goodsList.store.storeAddress}}
				</view>
			</view>
			<view class="input-box">
				<uni-icons class="icon-left" @click="iconLeft" type="left" size="20"></uni-icons>
				<input class="uni-input" v-model="goodsNum" style="text-align: center;"/>
				<uni-icons class="icon-right" @click="iconRight" type="right" size="20"></uni-icons>
			</view>
			<view class="box-introduce">
				<view class="intr-s">
					<span>商品介绍:</span>
				</view>
				<view class="intr-in">
					{{goodsList.introduction}}
				</view>
				
			</view>
		</view>
		
		<view class="foot">
			<view class="foot-zf" @click="insertOrder()">
				<view>加入订单</view>
			</view>
			<view class="foot-zf" @click="goOrder(goodsList.storeId)">
				<view>购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../util/http';
	export default {
		goodsid:'',
		name:'',
		data(){
			return {
				// 轮播图
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				total:'',
				images:'',
				goodsNum:1,
				goodsList:[],
				imageList:[]
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.goodsid=option.id;
		},
		onShow() {
			this.getByGoodsId()
			// this.insertOrder()
		},
		methods:{
			// 根据goods中的id查询goods相应数据
			getByGoodsId(){
				http({
					url:'/goods/getByGoodsId',
					params:{
						id:this.goodsid
						// id:9
					},
					success:(res)=>{
						// console.log(res)
						if(res.data){
							this.goodsList=res.data.data
						}
						
						this.images=res.data.data.goodsImages
						this.imageList = this.images.split('!!!')
					}
				})
			},
			// 点击 加入订单键 则加入订单
			insertOrder(){
				http({
					url:'/order/insertOrder',
					method:'post',
					params:{
						goodsId:this.goodsList.id,
						goodsNum:this.goodsNum
					},
					success:(res)=>{
						uni.showToast({
							title:'已加入订单'
						})
					}
				})
			},
			iconLeft(){
				if(this.goodsNum == 1){
					return 
				}else{
					this.goodsNum = this.goodsNum-1
				}
			},
			iconRight(){
				this.goodsNum =this.goodsNum+1
			},
			// 返回原来的地方
			goBeck(){
				uni.navigateBack({
					
				})
			},
			// 跳转到订单页面
			goOrder(id){
				uni.navigateTo({
					url:"/pages/order/detail?StoreId="+id
				})
			}
		}
	}
</script>

<style scoped>
.Commodity{
	margin-top: 60rpx;
}
.header{
	display: flex;
}
/* 返回 */
.tap{
	border-bottom: 1px solid gainsboro;
	margin-left: 40rpx;
	height: 60rpx;
	display: flex;
}
.tap image{
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}
.tap text{
	/* font-size: 15px; */
}
/*轮播图*/
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}
.swiper {
	height: 400rpx;
}
.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}
/* 价格 */
.box-price{
	margin-left: 5px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}
.box-price > span{
	line-height: 20px;
	vertical-align: middle;
}
.box-price > span:first-child{
	color: #f40;
	font-size: 28px;
	font-weight: bold;
}
.box-price > span:nth-child(2){
	font-size: 12px;
	background-color: #f40;
	color: white;
	padding-left:1px;
	padding-right:1px;
}
/* 商品名 */
.box-cname{
	margin-left: 10px;
	margin-right: 5px;
}
.box-cname span{
	color: #444;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

/* 店铺 */
.box-shop{
	margin-top: 10px;
	margin-left: 10px;
	height: 40px;
	padding: 5px auto;
}
.shop-sname{
	width: 205px; 
	height: 22px;
	margin-top: 10px;
	text-decoration: none;
}
.ders{
	width: 20px;
	height: 15px;
	line-height: 22px;
	float: left;
	margin-left: 10px;
	margin-top: 1px;
}
.der{
	width: 18px;
	height: 3px;
	background: #f40;
	float: left;
	margin-top: 2px;
}
.sname{
	font-size: 15px;
	float: left;
	color: #888;
	text-decoration: underline;
}
.input-box{
	width: 80px;
	position: absolute;
	top: 47%;
	left: 65%;
	border: 1px solid #888;
	border-radius: 20px;
	display: flex;
	align-items: center;
}
.icon-left{
	border-right: 1px solid #888;
}
.icon-right{
	border-left: 1px solid #888;
}
/* 地址 */
.shop-address{
	color: #444;
	font-size: 12px;
}
/* 介绍 */
.box-introduce{
	margin: 5px auto;
	padding: 5px;
	border: 1px solid rgba(223, 229, 238, 1.0);
	overflow: hidden;
}
.intr-s{
	border-bottom: 1px solid rgba(238, 238, 238, 1); 
}
.intr-in{
	padding: 0 10px;
	font-size: 15px;
	font-family: 'Courier New', Courier, monospace;
}
/* 底部 */
.foot{
	width: 100%;
	height: 40px;
	position: fixed;
	bottom: 0;
	display: flex;
	border-top: 1px solid #888;
}
.foot>view{
	margin-left: 20px;
}
.foot-zf{
	position: relative;
	left: 150px;
	width: 80px;
	height: 30px;
	border-radius: 15px;
	margin-top: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	background-color: #f40;
}
</style>